<template>
    <n-card>
        <n-popover
            trigger="click"
            :show="showPopover"
            @clickoutside="showPopover = false"
        >
            <template #trigger>
                <div
                    class="w-full cursor-pointer flex justify-between"
                    @click="showPopover = true"
                >
                    <span class="font-size-16px">筛选会议室</span>
                    <div class="flex flex-wrap gap-4px">
                        <n-tag
                            v-for="(item, index) in params"
                            :key="index"
                            size="small"
                        >
                            {{ item }}
                        </n-tag>
                    </div>
                </div>
            </template>
            <div class="w-800px flex gap-16px">
                <n-list hoverable class="w-50%">
                    <n-list-item>
                        <n-thing title="预定日期">
                            <template #header-extra>
                                <n-date-picker
                                    v-model:value="roomRequirement.reserveDate"
                                    :is-date-disabled="dateDisabled"
                                    @update:value="
                                        roomRequirement.startTime = null;
                                        roomRequirement.endTime = null;
                                    "
                                    type="date"
                                    class="w-215px"
                                />
                            </template>
                        </n-thing>
                    </n-list-item>
                    <n-list-item>
                        <n-thing title="开始时间">
                            <template #header-extra>
                                <n-time-picker
                                    v-model:formatted-value="
                                        roomRequirement.startTime
                                    "
                                    :is-hour-disabled="startTimeDisabled"
                                    format="HH"
                                    class="w-215px"
                                />
                            </template>
                        </n-thing>
                    </n-list-item>
                    <n-list-item>
                        <n-thing title="结束时间">
                            <template #header-extra>
                                <n-time-picker
                                    v-model:formatted-value="
                                        roomRequirement.endTime
                                    "
                                    :is-hour-disabled="endTimeDisabled"
                                    :disabled="!roomRequirement.startTime"
                                    format="HH"
                                    class="w-215px"
                                />
                            </template>
                        </n-thing>
                    </n-list-item>
                    <n-list-item>
                        <n-thing title="设备支持">
                            <template #header-extra>
                                <div class="w-full flex gap-4px">
                                    <n-checkbox
                                        v-model:checked="
                                            roomRequirement.device.speaker
                                        "
                                        label="扬声器"
                                    />
                                    <n-checkbox
                                        v-model:checked="
                                            roomRequirement.device.projector
                                        "
                                        label="投影仪"
                                    />
                                    <n-checkbox
                                        v-model:checked="
                                            roomRequirement.device.internet
                                        "
                                        label="互联网"
                                    />
                                </div>
                            </template>
                        </n-thing>
                    </n-list-item>
                </n-list>
                <n-list hoverable class="w-50%">
                    <n-list-item>
                        <n-thing title="面积(㎡)">
                            <template #header-extra>
                                <n-input-number
                                    v-model:value="roomRequirement.area"
                                    class="w-full"
                                    min="0"
                                />
                            </template>
                        </n-thing>
                    </n-list-item>
                    <n-list-item>
                        <n-thing title="座位数">
                            <template #header-extra>
                                <n-input-number
                                    v-model:value="roomRequirement.capacity"
                                    min="0"
                                />
                            </template>
                        </n-thing>
                    </n-list-item>
                    <n-list-item>
                        <n-thing title="类型">
                            <template #header-extra>
                                <n-select
                                    v-model:value="roomRequirement.roomType"
                                    :options="roomTypeLabel"
                                    class="w-215px"
                                />
                            </template>
                        </n-thing>
                    </n-list-item>
                    <n-list-item>
                        <n-thing title="备注">
                            <template #header-extra>
                                <n-input
                                    v-model:value="roomRequirement.notes"
                                />
                            </template>
                        </n-thing>
                    </n-list-item>
                </n-list>
            </div>
            <div class="w-full flex justify-end gap-10px mt-10px">
                <n-button
                    ghost
                    size="small"
                    :focusable="false"
                    @click="handleResetParams"
                >
                    <template #icon>
                        <n-icon :component="Reload" />
                    </template>
                    重置
                </n-button>
                <n-button
                    ghost
                    size="small"
                    :focusable="false"
                    @click="hanldeFilterRooms"
                >
                    <template #icon>
                        <n-icon :component="Search" />
                    </template>
                    筛选
                </n-button>
            </div>
        </n-popover>
    </n-card>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { Reload, Search } from "@vicons/ionicons5";
import { cloneDeep } from "lodash";

import type { Requirement } from "@/service/api/types/reservation";

const emits = defineEmits<{
    (e: "filter-room", params: Requirement): void;
}>();

const showPopover = ref(false);

const roomTypeLabel = [
    { label: "教室型", value: "classroom" },
    { label: "圆桌型", value: "roundtable" },
];

const roomDeviceLabel = {
    internet: "互联网",
    projector: "投影仪",
    speaker: "扬声器",
};

const emptyRequirement: Requirement = {
    area: 0,
    capacity: 0,
    startTime: null,
    endTime: null,
    reserveDate: null,
    roomType: null,
    device: {
        speaker: false,
        projector: false,
        internet: false,
    },
    notes: "",
};

const roomRequirement = reactive<Requirement>(cloneDeep(emptyRequirement));

const params = ref<string[]>([]);

// 重置筛选条件
const handleResetParams = () => {
    params.value = [];
    Object.assign(roomRequirement, cloneDeep(emptyRequirement));
};

// 日期选择器禁用
const dateDisabled = (ts: number) => {
    const twoMonthMilliseconds = 2 * 30 * 24 * 60 * 60 * 1000;
    const now = new Date(new Date().toLocaleDateString()).getTime();
    return ts < now || ts - now > twoMonthMilliseconds;
};

const startTimeDisabled = (hour: number) => {
    if (
        roomRequirement.reserveDate !== null &&
        new Date(roomRequirement.reserveDate!).toLocaleDateString() ===
            new Date().toLocaleDateString()
    ) {
        return hour < 8 || hour > 21 || hour <= new Date().getHours();
    }
    if (roomRequirement.endTime !== null) {
        return hour < 8 || hour > 21 || hour >= roomRequirement.endTime;
    }
    return hour < 8 || hour > 21;
};

const endTimeDisabled = (hour: number) => {
    if (roomRequirement.startTime !== null) {
        return hour < 8 || hour > 21 || hour <= roomRequirement.startTime;
    }
    return hour < 8 || hour > 21;
};

const hanldeFilterRooms = () => {
    if (
        roomRequirement.reserveDate === null ||
        roomRequirement.startTime === null ||
        roomRequirement.endTime === null
    ) {
        window.NMessage.warning("请选择日期、开始时间和结束时间");
        return;
    }
    params.value = [];
    for (const k in roomRequirement) {
        const key = k as keyof Requirement;
        if (
            roomRequirement[key] === "" ||
            roomRequirement[key] === 0 ||
            roomRequirement[key] === null
        ) {
            continue;
        }
        switch (key) {
            case "reserveDate":
                params.value.push(
                    `预定日期: ${new Date(
                        roomRequirement.reserveDate!
                    ).toLocaleDateString()}`
                );
                break;
            case "startTime":
                params.value.push(`开始时间: ${roomRequirement.startTime}时`);
                break;
            case "endTime":
                params.value.push(`结束时间: ${roomRequirement.endTime}时`);
                break;
            case "area":
                params.value.push(`面积: ${roomRequirement.area}㎡`);
                break;
            case "capacity":
                params.value.push(`座位数: ${roomRequirement.capacity}`);
                break;
            case "roomType":
                params.value.push(
                    `${
                        roomTypeLabel.find(
                            (item) => item.value === roomRequirement.roomType
                        )?.label
                    }`
                );
                break;
            case "device":
                for (const k in roomRequirement.device) {
                    const key = k as keyof Requirement["device"];
                    if (roomRequirement.device[key]) {
                        params.value.push(
                            `${
                                roomDeviceLabel[
                                    key as keyof typeof roomDeviceLabel
                                ]
                            }`
                        );
                    }
                }
                break;
        }
    }
    showPopover.value = false;
    emits("filter-room", cloneDeep(roomRequirement));
};
</script>

<style scoped></style>
